<section class="">
    <div class="card-header">
        <filter-list request="request" callback="loadOrders(pageIndex)"></filter-list>
    </div>
    <div class="card-body">
        <table id="list-page" class="table table-sm table-hover sortable" cellspacing="0" ng-init="data = loadOrders()">
            <thead class="thead-light">
                <tr>
                    <th scope="col" width="4%">
                        <span class="oi oi-sort-ascending"></span>
                    </th>
                    <!--<th scope="col" width="3%">
                            <span class="fas fa-sort"></span>
                        </th>-->
                    <th scope="col" width="20%">
                        Customer
                    </th>
                    <th scope="col">
                        Phone
                    </th>
                    <th scope="col">
                        Total
                        
                    </th><th scope="col" width="15%">
                        Created Date
                    </th>
                    <th width="30%">
                        Rating
                    </th>
                    <th scope="col" width="5%" class="text-right">Actions</th>
                </tr>
            </thead>

            <tbody class="sortable-item" ng-repeat="item in data.items track by $index" style="border: 1px;">
                <tr class="" sort-model="category" sort-model-id="{{item.id}}" data-toggle="collapse" href="#collapse-order{{item.id}}-comments" role="button" aria-expanded="false" aria-controls="collapse-order{{item.id}}-comments">

                    <!--<td>
                            <input type="text" value="{{item.priority}}" class="item-priority form-control form-control-sm d-inline" style="width:40px;" />
                        </td>-->
                    <td class="drag-header">
                        <!--<span class="fas fa-sort"></span>-->

                        <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                            <button type="button" class="btn btn-light"><span class="fa fa-sort-up small"></span></button>
                            <button type="button" class="btn btn-light"><span class="fa fa-sort-down small"></span></button>
                        </div>
                    </td>
                    <td>

                        <span ng-bind="item.customer.fullName"></span>
                    </td>
                    <td>
                        <span ng-bind="item.phoneNumber | phoneNumber"></span>
                    </td>
                    <td>
                        <span ng-bind="item.totalSpent"></span>
                    </td>
                    <td>
                        <small>
                            {{item.createdDateTime | utcToLocal:'d.M.yyyy h:mm a'}}
                        </small>
                    </td>
                    <td>
                        <table class="table table-sm table-hover mb-0" cellspacing="0" style="background-color: #f5f5f5;" ng-if="item.comments.length>0">
                            <thead style="font-size:small; font-weight:normal">
                                <tr>
                                    <th scope="col" width="60%">
                                        Comment
                                    </th>
                                    <th scope="col">
                                        Rating
                                    </th>

                                    <!--<th scope="col" width="5%" class="text-right">Actions</th>-->
                                </tr>
                            </thead>

                            <tbody class="sortable">
                                <tr class="sortable-item" ng-repeat="c in item.comments track by $index">

                                    <td>
                                        <span ng-bind="c.content">
                                    </span></td>
                                    <td>
                                        <star-rating rating-value="c.rating" max="5" is-readonly="false"></star-rating>
                                    </td>
                                    <!--<td>
                                                <div class="btn-group btn-group-sm btn-group-sm float-right" role="group" aria-label="Actions">
                                                    <a ng-click="removeOrder(item.id);"
                                                       class="btn btn-light">
                                                        <span class="fas fa-times text-danger"></span>
                                                    </a>
                                                </div>
                                            </td>-->
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td>
                        <div class="btn-group btn-group-sm btn-group-sm float-right" role="group" aria-label="Actions">

                            <a href="/portal/order/details/{{item.id}}" class="btn btn-light"><span class="fa fa-pen text-primary"></span></a>
                            <!--<a href="{{item.detailsUrl}}" target="_blank" class="btn btn-light"><span class="fa fa-eye text-primary"></span></a>-->
                            <a href="#" class="btn btn-light" ng-click="removeOrder(item.id)">
                                <span class="fa fa-times text-danger"></span>
                            </a>
                        </div>
                    </td>
                </tr>

            </tbody>
        </table>

    </div>
    <div class="card-footer">
        <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems" ul-class="pagination justify-content-end" a-class="page-link" paging-action="loadOrders(page-1)" scroll-top="true"></paging>
    </div>


</section>
